<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    {{ }} 我们称之为 vuejs 提供的插值表达式，可以把 vuejs 管理的 data 的数据插入到 使用的地方。
</div>
<div>
    {{ }} 里面到底可以写哪些内容？
</div>
<p>
    1. 可以写 data 里面的数据
</p>
<p>
    2. 可以直接写 字面量数据
</p>
<p>
    3. 可以进行条件表达式
</p>
<p>
    4. 可以进行三目运算
</p>
<p>
    5. 系统函数的调用
</p>

<div id="app">
    <h2>{{ title }}</h2>
    <hr>
    <h2>对象数组的展示</h2>
    <p>{{ list }}</p>
    <hr>
    <ul v-for="ele in list">
        <li>序号：{{ ele.id }}</li>
        <li>名称：{{ ele.name }}</li>
        <li>年龄：{{ ele.age }}</li>
    </ul>

</div>


</body>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">

    const vm = new Vue({
        // el 是一个选择器，这里使用的 #app 就是第二步定义的 vuejs 管理区域的 id选择器
        el: '#app',

        // vuejs 管理的数据
        data: {
            // 基本数据类型
            title: 'vuejs 复合数据类型展示',
            // 复合数据类型（对象类型）
            arr: [2, 23, 34],
            obj: {id: 12, name: 'mark', age: 23},
            list: [
                {id: 12, name: 'mark', age: 23},
                {id: 13, name: 'andy', age: 24},
            ]
        }
    })

    console.log(vm);


</script>

</html>
